<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <meta name="author" content="得闲技术 Team">
    <meta name="copyright" content="得闲技术">
    <title>管理中心 - Powered By 得闲技术</title>
    <link href="/resources/favicon.ico" rel="icon">
    <link href="${base}/resources/common/css/bootstrap.css" rel="stylesheet">
    <link href="${base}/resources/common/css/iconfont.css" rel="stylesheet">
    <link href="${base}/resources/common/css/font-awesome.css" rel="stylesheet">
    <link href="${base}/resources/common/css/awesome-bootstrap-checkbox.css" rel="stylesheet">
    <link href="${base}/resources/common/css/base.css" rel="stylesheet">
    <link href="${base}/resources/admin/css/base.css" rel="stylesheet">
    <link href="${base}/resources/admin/css/login.css" rel="stylesheet">
    <!--[if lt IE 9]>
    <script src="${base}/resources/common/js/html5shiv.js"></script>
    <script src="${base}/resources/common/js/respond.js"></script>
    <![endif]-->
    <script src="${base}/resources/common/js/jquery.js"></script>
    <script src="${base}/resources/common/js/bootstrap.js"></script>
    <script src="${base}/resources/common/js/bootstrap-growl.js"></script>
    <script src="${base}/resources/common/js/jquery.validate.js"></script>
    <script src="${base}/resources/common/js/jquery.validate.additional.js"></script>
    <script src="${base}/resources/common/js/jquery.form.js"></script>
    <script src="${base}/resources/common/js/jquery.cookie.js"></script>
    <script src="${base}/resources/common/js/lodash.js"></script>
    <script src="${base}/resources/common/js/URI.js"></script>
    <script src="${base}/resources/common/js/bootbox.js"></script>
    <script src="${base}/resources/common/js/base.js"></script>
    <script src="${base}/resources/admin/js/base.js"></script>
    <script>
        $().ready(function () {
            if (top !== self) {
                top.location.href = location.href;
            }

            var $document = $(document);
            var $loginForm = $("#loginForm");
            var $username = $("#username");
            var $password = $("#password");
            var $captcha = $("#captcha");
            var $captchaImage = $("[data-toggle='captchaImage']");
            var $rememberUsername = $("#rememberUsername");
            var rememberedUsernameLocalStorageKey = "rememberedAdminUsername";
            var loginSuccessUrl = "\/admin/index";

            // 记住用户名
            if (localStorage.getItem(rememberedUsernameLocalStorageKey) != null) {
                $username.val(localStorage.getItem(rememberedUsernameLocalStorageKey));
                $password.focus();
                $rememberUsername.prop("checked", true);
            } else {
                $username.focus();
                $rememberUsername.prop("checked", false);
            }
            // 表单验证
            $loginForm.validate({
                rules: {
                    username: "required",
                    password: {
                        required: true,
                        normalizer: function (value) {
                            return value;
                        }
                    },
                    captcha: "required"
                },
                messages: {
                    username: {
                        required: "请填写用户名"
                    },
                    password: {
                        required: "请填写密码"
                    },
                    captcha: {
                        required: "请填写验证码"
                    }
                },
                submitHandler: function (form) {
                    $(form).ajaxSubmit({
                        successMessage: false,
                        successRedirectUrl: function (redirectUrlParameterName) {
                            var redirectUrl = new URI().search(true)[redirectUrlParameterName];
                            return $.trim(redirectUrl) !== "" ? redirectUrl : loginSuccessUrl;
                        }
                    });
                },
                invalidHandler: function (event, validator) {
                    $.bootstrapGrowl(validator.errorList[0].message, {
                        type: "warning"
                    });
                },
                errorPlacement: $.noop
            });

            // 用户登录成功、记住用户名
            $loginForm.on("success.dexian.ajaxSubmit", function () {

                if ($rememberUsername.prop("checked")) {
                    localStorage.setItem(rememberedUsernameLocalStorageKey, $username.val());
                } else {
                    localStorage.removeItem(rememberedUsernameLocalStorageKey);
                }

                $document.trigger("loggedIn.dexian.user", [{
                    type: "admin",
                    username: $username.val()
                }]);
            });

            // 刷新验证码图片
            $loginForm.on("error.dexian.ajaxSubmit", function () {
                $captchaImage.captchaImage("refresh");
            });

            // 清空验证码
            $captchaImage.on("refreshed.dexian.captchaImage", function () {
                $captcha.val("");
            });

            var isChrome = window.navigator.userAgent.indexOf("Chrome") !== -1;
            if (!isChrome) {
                bootbox.alert("为了最佳体验，请使用Google Chrome浏览器！");
            }
        });
    </script>
</head>
<body class="admin login">
<main>
    <div class="container">
        <div class="panel panel-default">
            <div class="panel-body">
                <form id="loginForm" action="/login" method="post">
                    <div class="media">
                        <div class="media-left media-middle logo">
                            <img src="/resources/admin/images/logo.png" alt="得闲技术">
                        </div>
                        <div class="media-body">

                            [#if isExpired?? && isExpired]
                                <div class="alert alert-danger">登录超时或者账号在其他地方登录，如果密码遭到泄露，请立即修改密码！</div>
                            [/#if]
                            <div class="form-group">
                                <div class="input-group">
                                    <label class="input-group-addon" for="username">
                                        <i class="iconfont icon-people"></i>
                                    </label>
                                    <input id="username" name="username" class="form-control" type="text" value=""
                                            maxlength="200" placeholder="用户名" autocomplete="off">
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="input-group">
                                    <label class="input-group-addon" for="password">
                                        <i class="iconfont icon-lock"></i>
                                    </label>
                                    <input id="password" name="password" class="form-control" type="password"
                                            value=""
                                            maxlength="200" placeholder="密 码" autocomplete="off">
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="input-group">
                                    <label class="input-group-addon" for="captcha">
                                        <i class="iconfont icon-pic"></i>
                                    </label>
                                    <input id="captcha" name="captcha" class="captcha form-control" type="text"
                                            maxlength="4" placeholder="验证码" autocomplete="off">
                                    <div class="input-group-btn">
                                        <img class="captcha-image" src="/resources/common/images/transparent.png"
                                                title="点击更换验证码" data-toggle="captchaImage">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="checkbox">
                                    <input id="rememberUsername" name="rememberUsername" type="checkbox">
                                    <label for="rememberUsername">记住用户名</label>
                                </div>
                            </div>
                            <div class="form-group">
                                <button class="btn btn-primary btn-lg btn-block" type="submit">登录</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</main>

[#include "/admin/template/csrf.ftl" /]

</body>
</html>
